<template>
  <div class="tabbar-Page">
    <div v-show="showTabbar" >
      <mt-tabbar v-model="selected" fixed>
        <mt-tab-item id="首页">
          <img slot="icon" src="../assets/images/yes.png">首页
        </mt-tab-item>

        <mt-tab-item id="商城">

        </mt-tab-item>
        <mt-tab-item id="视频">
          <img slot="icon" src="../assets/images/yes.png">视频
        </mt-tab-item>

      </mt-tabbar>
      <div>
        <mt-tab-container v-model="selected">
          <mt-tab-container-item id="首页">
            <home></home>
          </mt-tab-container-item>
          <mt-tab-container-item id="商城">
            <shopping></shopping>
          </mt-tab-container-item>
          <mt-tab-container-item id="视频">
456
          </mt-tab-container-item>

        </mt-tab-container>
      </div>
    </div>

    <div class="publishNew" @click="goShopping">+</div>
  </div>
</template>

<script>
  import home from "../components/home.vue"
  import shopping from "../components/shopping.vue"
  export default {
    data () {
      return {
        selected:'',
        showTabbar:true
      }
    },
    methods:{
      goShopping(){
        this.$router.push("/shopping");
      }
    },
    components:{
      home,shopping
    }
  }
</script>

<style scoped>
  .publishNew{
    right:186px;
    bottom: 5px;
    width: 30px;
    position: fixed;
    z-index: 1;
    display:block;
    border-radius:50%;
    background-color: rgba(241, 201, 20, 0.5);
    color:white;
    font-size: 40px;
    padding-left: 7px;
    padding-right: 7px;

  }
</style>
